<template>
	<view id="bindPhone">
		<h1>绑定手机号</h1>
		
		<view class="phoneForm">
			<u-form 
				labelPosition="left"
				:model="mobileModel"
				ref="mForm"
			>
				<u-form-item
					prop="mobileInfo.phone"
					borderBottom
					ref="item1"
							>
					<!-- 手机的区号 -->
					<view class="dqh">+86</view>
					<u--input type="number" placeholder="请输入手机号"  v-model="mobileModel.mobileInfo.phone"></u--input>
				</u-form-item>
				<u-form-item
					prop="mobileInfo.catch"
					borderBottom
					ref="item2"
							>
					<u--input type="number" placeholder="请输入验证码" v-model="mobileModel.mobileInfo.catch"></u--input>
					<u-button plain>获取验证码</u-button>
				</u-form-item>
				
			</u-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobileModel: {
					mobileInfo: {
						phone: null,
						catch: '',
					},
				},
				rules:{
					'mobileInfo.phone':[
						{
							type:'number',
							require:true,
							message:'请填写手机号',
							trigger:['blur']
						},
						{ 
							pattern: /^1[3-9]\d{9}$/,
							message: '请输入正确的手机号', 
							trigger: ['blur', 'change'] }
					],
					'mobileInfo.catch':{
						type:'number',
						max:6,
						require:true,
						message:'请输入验证码',
						trigger:['blur']
					}
				}
			}
		},
		methods: {
			
		},
		onReady() {
			this.$refs.mForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss">
#bindPhone{
	padding: 40rpx;
	h1{
		text-align: center;
	}
	.phoneForm{
		padding: 40rpx;
	}
	.u-form-item__body__right{
		width: 100%;
		.u-form-item__body__right__content__slot{
			flex-direction: row;
			input{
				width: 90%;
			}
			.dqh{
				width: 15%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rbg(250,217,186);
			}
			.u-button{
				width: 200rpx;
				margin-left: 20rpx;
			}
		}
	}
}
</style>
